<template>
  <div class="EditAuthority">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{
          $t("views.Set.gardenAuthority.50zhei47pek0")
        }}</span>
      </div>
      <div class="ct-head-right flex-al">
        <el-button size="small" type="primary" @click="savePowerList">{{
          $t("views.Set.gardenAuthority.50zhei47qzs0")
        }}</el-button>
      </div>
    </div>
    <ul class="role-table bg-white mt5 ml5 mr5">
      <li class="li-item">
        <div class="item-info-1" style="text-align: center">
          {{ $t("views.Set.gardenAuthority.50zhei47rco0") }}
        </div>
        <div class="item-info-2">
          {{ $t("views.Set.gardenAuthority.50zhei47ro00") }}
        </div>
      </li>
      <li class="li-item" v-for="(item, index) in dataList" :key="index">
        <!-- left!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
        <div class="item-info-1">
          <div class="father">
            <i
              class="fs20 mr15"
              @click="handleArrowClick(item)"
              :class="{
                'el-icon-caret-bottom': !item.isOpen,
                'el-icon-caret-top': item.isOpen,
              }"
            ></i>
            <el-checkbox
              v-model="item.selected"
              style="margin-right: 5px"
              @change="handlefirstClick(item)"
              :indeterminate="item.indeterminate"
              :disabled="item.disabled"
            ></el-checkbox>
            {{ item.leftData }}
          </div>
          <!-- <div style="border-top:1px solid #ddd" v-if="item.isOpen">123</div> -->
          <!-- 二级内容开始-->
          <div class="left-container" v-if="item.isOpen">
            <div
              style="border-top: 1px solid #ddd"
              v-for="(item2, index2) in item.children"
              :key="index2"
            >
              <div class="second-container">
                <div class="info-container">
                  <i
                    class="fs20 mr15"
                    @click="handleArrowClick(item2)"
                    :class="{
                      'el-icon-caret-bottom': !item2.isOpen,
                      'el-icon-caret-top': item2.isOpen,
                    }"
                  ></i>
                  <el-checkbox
                    v-model="item2.selected"
                    style="margin-right: 5px"
                    @change="secondChange(item2, item)"
                    :indeterminate="item2.indeterminate"
                    :disabled="item.disabled"
                  ></el-checkbox>
                  {{ item2.leftData }}
                </div>
              </div>
              <!-- 三级内容开始 -->
              <!-- <div class="third" style="border-top:1px solid #ddd" v-if="item2.isOpen">123</div> -->
              <!-- <div class="third" style="border-top:1px solid #ddd" v-if="item2.isOpen">123</div> -->
              <div class="third-container" v-if="item2.isOpen">
                <div
                  style="border-top: 1px solid #ddd"
                  v-for="(item4, index4) in item2.children"
                  :key="index4"
                >
                  <div class="third-container">
                    <div class="third-info-container">
                      <el-checkbox
                        v-model="item4.selected"
                        style="margin-right: 5px"
                        :indeterminate="item4.indeterminate"
                        @change="handleCheckAllChange(item4, item2, item)"
                        :disabled="item.disabled"
                      ></el-checkbox>
                      {{ item4.leftData }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- 三级内容结束 -->
            </div>
          </div>
          <!-- 二级内容结束 -->
          <!-- right!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
        </div>
        <div class="item-info-2">
          <div>&nbsp;</div>
          <!-- <div style="border-top:1px solid #ddd" v-if="item.isOpen">456</div> -->
          <div class="right-container" v-if="item.isOpen">
            <div
              class="right-info-container"
              style="border-top: 1px solid #ddd"
              v-for="(item2, index) in item.children"
              :key="index"
            >
              <!-- <el-checkbox v-model="item.selected" style="margin-right:5px"></el-checkbox>
                {{item.leftData}}-->
              <span
                v-for="(item3, index3) in item2.right"
                :key="index3"
                class="right-item"
              >
                <el-checkbox
                  v-model="item3.selected"
                  style="margin-right: 5px"
                  @change="handleSecondRightChange(item2, item)"
                ></el-checkbox>
                {{ item3.info }}
              </span>
              <!-- 三级内容开始 -->
              <div class="third-container" v-if="item2.isOpen">
                <div
                  style="border-top: 1px solid #ddd"
                  v-for="(item4, index4) in item2.children"
                  :key="index4"
                >
                  <span
                    v-for="(item5, index5) in item4.right"
                    :key="index5"
                    class="right-item"
                  >
                    <el-checkbox
                      v-model="item5.selected"
                      style="margin-right: 5px"
                      @change="handleThirdClick(item4, item2, item)"
                    ></el-checkbox>
                    {{ item5.info }}
                  </span>
                </div>
              </div>
              <!-- 三级内容结束 -->
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      dataList: [
        // {
        //   leftData: "园务管理",
        //   selected: false,
        //   isOpen: false
        // },
        // {
        //   leftData: "教务管理",
        //   selected: false,
        //   isOpen: false
        // },
        // {
        //   leftData: "营养保健",
        //   selected: false,
        //   isOpen: false
        // },
        // {
        //   leftData: "园所安全",
        //   selected: false,
        //   isOpen: false
        // },
        // {
        //   leftData: "人事管理",
        //   selected: false,
        //   isOpen: false
        // },
        // {
        //   leftData: "财务管理",
        //   selected: false,
        //   isOpen: false
        // },
        // {
        //   leftData: "库存管理",
        //   selected: false,
        //   isOpen: false
        // },
        // {
        //   leftData: "报表",
        //   selected: false,
        //   isOpen: false,
        //   children: [
        //     {
        //       leftData: "园所信息",
        //       right: [
        //         {
        //           info: "查看",
        //           selected: false
        //         },
        //         {
        //           info: "编辑",
        //           selected: false
        //         }
        //       ],
        //       selected: false,
        //       isOpen: false
        //     },
        //     {
        //       leftData: "园所参数设置",
        //       right: [
        //         {
        //           info: "查看",
        //           selected: false
        //         },
        //         {
        //           info: "编辑",
        //           selected: false
        //         },
        //         {
        //           info: "新增",
        //           selected: false
        //         }
        //       ],
        //       selected: false,
        //       isOpen: false
        //     },
        //     {
        //       leftData: "操作日志",
        //       right: [
        //         {
        //           info: "查看",
        //           selected: false
        //         },
        //         {
        //           info: "编辑",
        //           selected: false
        //         },
        //         {
        //           info: "新增",
        //           selected: false
        //         }
        //       ],
        //       selected: false,
        //       isOpen: false
        //     },
        //     {
        //       leftData: "帮助中心",
        //       right: [
        //         {
        //           info: "查看",
        //           selected: false
        //         },
        //         {
        //           info: "编辑",
        //           selected: false
        //         },
        //         {
        //           info: "新增",
        //           selected: false
        //         }
        //       ],
        //       selected: false,
        //       isOpen: false
        //     }
        //   ]
        // },
        // {
        //   leftData: "系统设置",
        //   indeterminate: false,
        //   selected: false,
        //   isOpen: false,
        //   children: [
        //     {
        //       leftData: "园所信息",
        //       indeterminate: false,
        //       right: [
        //         {
        //           info: "查看",
        //           selected: false
        //         },
        //         {
        //           info: "编辑",
        //           selected: false
        //         }
        //       ],
        //       selected: false,
        //       isOpen: false,
        //       children: [
        //         {
        //           leftData: "子权限一",
        //           selected: false,
        //           indeterminate: false,
        //           right: [
        //             {
        //               info: "按钮一",
        //               selected: false
        //             },
        //             {
        //               info: "按钮二",
        //               selected: false
        //             }
        //           ]
        //         },
        //         {
        //           leftData: "子权限二",
        //           selected: false,
        //           right: [
        //             {
        //               info: "按钮一",
        //               selected: false
        //             },
        //             {
        //               info: "按钮二",
        //               selected: false
        //             }
        //           ]
        //         }
        //       ]
        //     },
        //     {
        //       leftData: "园所参数设置",
        //       indeterminate: false,
        //       right: [
        //         {
        //           info: "查看",
        //           selected: false
        //         },
        //         {
        //           info: "编辑",
        //           selected: false
        //         },
        //         {
        //           info: "新增",
        //           selected: false
        //         }
        //       ],
        //       selected: false,
        //       isOpen: false
        //     },
        //     {
        //       leftData: "操作日志",
        //       indeterminate: false,
        //       right: [
        //         {
        //           info: "查看",
        //           selected: false
        //         },
        //         {
        //           info: "编辑",
        //           selected: false
        //         },
        //         {
        //           info: "新增",
        //           selected: false
        //         }
        //       ],
        //       selected: false,
        //       isOpen: false
        //     },
        //     {
        //       leftData: "帮助中心",
        //       indeterminate: false,
        //       right: [
        //         {
        //           info: "查看",
        //           selected: false
        //         },
        //         {
        //           info: "编辑",
        //           selected: false
        //         },
        //         {
        //           info: "新增",
        //           selected: false
        //         }
        //       ],
        //       selected: false,
        //       isOpen: false
        //     }
        //   ]
        // }
      ],
    };
  },
  watch: {
    dataList: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
        // this.handleSecondRightChange()
      },
      deep: true,
    },
  },
  created() {
    this.postpartId = this.$route.query.postpart_id;

    this.getModuleList();
  },
  methods: {
    // 提交 权限
    savePowerList() {
      let jsonData = [],
        ids = [];
      this.dataList.forEach((e) => {
        if (e.selected) {
          ids.push(e.id);
        }
        if (e.children && e.children.length > 0) {
          e.children.forEach((echild) => {
            if (echild.children && echild.children.length > 0) {
              echild.children.forEach((eGrandChild) => {
                if (eGrandChild.selected) {
                  ids.push(eGrandChild.id);
                }
              });
            }
            if (echild.selected) {
              ids.push(echild.id);
            }
          });
        }
      });

      ids.forEach((e) => {
        jsonData.push({
          postpart_id: this.postpartId,
          module_id: e,
        });
      });
      console.log(jsonData);
      this.addScPowerAction(jsonData);
    },
    //  添加权限
    addScPowerAction(json) {
      this.$http
        .addScPowerAction({
          postpart_id: this.postpartId,
          power: JSON.stringify(json),
        })
        .then((res) => {
          const { error, errortip } = res.data;
          if (error == 0) {
            this.$message({
              type: "success",
              message: errortip,
            });
            this.$router.go(-1);
          } else {
            this.$message({
              type: "warning",
              message: errortip,
            });
          }
        });
    },
    // 获取 权限列表
    getModuleList() {
      this.$http
        .getModuleList({
          postpart_id: this.postpartId,
          module_class: 2,
        })
        .then((res) => {
          console.log(res);
          const { error, result } = res.data;
          if (error == 0) {
            this.dataList = result.children;
          }
        });
    },

    handlefirstClick(item) {
      console.log(item, this.$t("views.Set.gardenAuthority.50zhei47rzc0"));
      item.children.forEach((val) => {
        val.selected = item.selected;
        this.secondChange(val, item);
      });
    },
    // 二级右侧点击
    handleSecondRightChange(item, item3) {
      console.log(
        item,
        this.$t("views.Set.gardenAuthority.50zhei47sb80"),
        item3
      );
      const flag = item.right.some((val) => {
        return val.selected;
      });
      if (flag) {
        item.indeterminate = true;
      } else {
        // item.indeterminate = false;
        if (item.children) {
          const flag4 = item.children.some((val) => {
            return val.indeterminate;
          });
          const flag5 = item.children.some((val) => {
            return val.selected;
          });
          if (flag4) {
            item.indeterminate = true;
          } else {
            item.indeterminate = false;
          }
          if (flag5) {
            item.indeterminate = true;
          } else {
            item.indeterminate = false;
          }
        } else {
          item.indeterminate = false;
        }
      }
      const flagTwo = item.right.every((val) => {
        return val.selected;
      });
      if (flagTwo) {
        if (item.children) {
          const flag3 = item.children.every((val2) => {
            return val2.selected;
          });
          if (flag3) {
            item.indeterminate = false;
            item.selected = true;
          }
        }
      } else {
        item.selected = false;
        if (!item.children) {
          const flag10 = item.right.every((val) => {
            return val.selected;
          });
          if (flag10) {
            item.selected = true;
            item.indeterminate = false;
          }
        }
      }
      if (!item.children) {
        const fff = item.right.every((val) => val.selected);
        if (fff) {
          item.indeterminate = false;
          item.selected = true;
        }
      }
      const right123 = item3.children.some((val) => val.indeterminate);
      if (right123) {
        item3.indeterminate = true;
      } else {
        const ddd = item3.children.every((val) => val.selected);
        item3.indeterminate = false;
        if (ddd) {
          item3.indeterminate = false;
          item3.selected = true;
        } else {
          item3.indeterminate = true;
          item3.selected = false;
          if (!right123) {
            item3.indeterminate = false;
            const lp = item3.children.some((val) => val.selected);
            if (lp) {
              item3.indeterminate = true;
            }
          }
        }
      }
    },
    // 二级左侧点击
    secondChange(item, item2) {
      if (item.right) {
        item.right.forEach((valr) => {
          valr.selected = item.selected;
        });
      }
      item.indeterminate = false;
      if (item.children) {
        item.children.forEach((val) => {
          val.indeterminate = false;
          val.selected = item.selected;
        });
      }
      if (item2.children) {
        const thirdFlag = item2.children.some((val) => val.selected);
        if (thirdFlag) {
          // item2.selected = false
          item2.indeterminate = true;
          const fll = item2.children.every((val) => val.selected);
          if (fll) {
            item2.indeterminate = false;
            item2.selected = true;
          }
          console.log(this.$t("views.Set.gardenAuthority.50zhei47sz00"));
        } else {
          item2.indeterminate = false;
          item2.selected = false;
          console.log(this.$t("views.Set.gardenAuthority.50zhei47tac0"));
          const gjk = item2.children.some((val) => val.indeterminate);
          if (gjk) {
            item2.selected = false;
            item2.indeterminate = true;
          }
        }
      }
    },
    handleArrowClick(item) {
      item.isOpen = !item.isOpen;
    },
    handleThirdClick(item, item2, item3) {
      console.log(
        this.$t("views.Set.gardenAuthority.50zhei47tlk0"),
        item,
        item2
      );
      const flag = item.right.some((val) => {
        return val.selected;
      });
      if (flag) {
        item.indeterminate = true;
      } else {
        item.indeterminate = false;
      }
      const flagTwo = item.right.every((val) => {
        return val.selected;
      });
      if (flagTwo) {
        item.selected = true;
        item.indeterminate = false;
      } else {
        item.selected = false;
      }
      if (item2.children) {
        if (item.indeterminate) {
          item2.indeterminate = true;
        } else if (!item.selected) {
          const flag22 = item2.children.some((val) => {
            return val.indeterminate;
          });
          if (!flag22) {
            // 二级左侧为false的情况下判断一级右侧
            const flag333 = item2.right.some((val) => val.selected);
            if (!flag333) {
              item2.indeterminate = false;
            }
          }
        }
        const flag12 = item2.children.some((val) => val.selected);
        if (flag12) {
          item2.indeterminate = true;
        } else {
          // item2.indeterminate = false
        }
      }
      const flaga = item2.right.every((val) => {
        return val.selected;
      });
      if (flaga) {
        const flagbb = item2.children.every((val) => {
          return val.selected;
        });
        if (flagbb) {
          item2.selected = true;
          item2.indeterminate = false;
        } else {
          item2.selected = false;
        }
      }
      // this.handlefirstClick(item3,)
      const flfl = item3.children.some((val) => val.indeterminate);
      if (flfl) {
        item3.indeterminate = true;
      } else {
        item3.indeterminate = false;
        const asd = item3.children.every((val) => val.selected);
        if (asd) {
          item3.indeterminate = false;
          item3.selected = true;
        } else {
          const zxxx = item3.children.some((val) => val.selected);
          if (zxxx) {
            item3.indeterminate = true;
          }
        }
      }

      console.log(item3, "item333");
    },
    handleCheckAllChange(item, item2, item3) {
      console.log(
        item,
        this.$t("views.Set.gardenAuthority.50zhei47u480"),
        item2,
        item3
      );
      let flag = item2.children.some((val) => {
        return val.selected;
      });
      if (flag) {
        item2.indeterminate = true;
      } else {
        const flagc = item2.right.some((val) => val.selected);
        if (flagc) {
          item2.indeterminate = true;
        } else {
          item2.indeterminate = false;
        }
      }
      const flagss = item2.right.every((val) => val.selected);
      if (flagss) {
        const flagff = item2.children.every((val) => val.selected);
        if (flagff) {
          item2.indeterminate = false;
          item2.selected = true;
          // item.indeterminate = false
          // item.selected = true
        }
      }
      item.right.forEach((val) => {
        val.selected = item.selected;
      });
      const swe = item.right.every((val) => val.selected);
      if (swe) {
        item.indeterminate = false;
        item.selected = true;
      }
      // item.indeterminate = false;
      const dsa = item3.children.some((val) => val.selected);
      if (dsa) {
        item3.indeterminate = true;
      }
      const www = item3.children.some((val) => val.indeterminate);
      if (www) {
        item3.indeterminate = true;
      } else {
        const wee = item3.children.every((val) => val.selected);
        item3.indeterminate = false;
        if (wee) {
          item3.indeterminate = false;
          item3.selected = true;
        } else {
          item3.indeterminate = true;
          if (!dsa) {
            item3.selected = false;
            item3.indeterminate = false;
          }
        }
      }
    },
  },
};
</script>
<style lang="less">
.role-table {
  min-height: 89vh;
  .li-item {
    &:last-child {
      border-bottom: 1px solid #ddd;
    }
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    line-height: 50px;
    display: flex;
    .item-info-1 {
      .father {
        margin-left: 40px;
      }
      width: 260px;
      border-right: 1px solid #ddd;
      text-align: left;
    }
    .item-info-2 {
      flex: 5;
      border-right: 1px solid #ddd;
      text-align: center;
    }
  }
  .second-container {
    width: 100%;
    color: #666;
    .info-container {
      width: 70%;
      text-align: left;
      margin-left: 23%;
    }
  }
  .third-container {
    width: 100%;
    color: #666;
    .third-info-container {
      width: 70%;
      text-align: left;
      margin-left: 43%;
    }
  }
  .right-info-container {
    text-align: left;
    color: #333;
  }
  .right-item {
    margin-left: 20px;
  }
}
</style>
